import React, {
  useLayoutEffect,
  useEffect,
  useRef,
  useState,
  useCallback,
  useMemo,
} from "react";
import { Interface } from "readline";

// 例子1
// const map = new WeakMap()
// let count = 1
// const App: React.FC = () => {
//   console.log('App render');
//   const [input, setInput] = useState('');
//   const changeValue = (e: React.ChangeEvent<HTMLInputElement>) => {
//     setInput(e.target.value);
//   }
//   //  const changeValue = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
//   //   setInput(e.target.value);
//   // },[])
//   if (!map.has(changeValue)){
//     map.set(changeValue, count++)
//   }
//   console.log(map.get(changeValue));

//   return <>
//   <input type="text" value={input} onChange={changeValue} />
//   </>
// };

// export default App;

// 例子2

interface Props {
  user: {
    name: string
    age: number
  },
  callback: () => void
}

const Child = React.memo((props: Props) => {
  console.log("Child render");
  return (
    <>
      <div>{props.user.name}</div>
      <div>{props.user.age}</div>
      <button onClick={props.callback}></button>
    </>
  );
});

const App: React.FC = () => {
  console.log("App render");
  const [input, setInput] = useState("");
  const [user, setUser] = useState({
    name: "张三",
    age: 18,
  });

  // const callback = useCallback(() => {
  //   console.log("callback");
  // },[]);
  const callback = () => {
    console.log("callback");
  };
  

  return (
    <>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <Child user={user} callback={callback}></Child>
    </>
  );
};

export default App;
